<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-09 17:29:47
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-02-21 15:03:27
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-openstack"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="云账户" prop="cloudAccountName">
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="镜像名称" prop="name">
      <el-input
        v-model="form.name"
        placeholder="请输入镜像名称"
        :disabled="formType === 2"
      />
    </el-form-item>
    <el-form-item v-if="formType === 1" label="镜像文件" prop="fileName">
      <file-uploader
        :file.sync="form.file"
        :name.sync="form.fileName"
        :btn-text="'选择文件'"
        :hint="'点击选择镜像文件'"
        :accept="'*'"
      />
    </el-form-item>
    <el-form-item class="item" label="镜像格式" prop="format">
      <el-select
        v-model="form.format"
        placeholder="请选择镜像格式"
        style="width: 100%"
        :disabled="formType === 2"
      >
        <el-option
          v-for="item in formatOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="可见性" prop="visibility">
      <el-select
        v-model="form.visibility"
        placeholder="请选择可见性"
        style="width: 100%"
      >
        <el-option
          v-for="item in visibilityOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item" label="受保护性" prop="protect">
      <el-select
        v-model="form.protect"
        placeholder="请选择受保护性"
        style="width: 100%"
      >
        <el-option
          v-for="item in projectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import FileUploader from '@/components/FileUploader'
import { IMAGE_OS, IMAGE_FORMAT } from '@/utils/constant'

export default {
  name: 'FormOpenstack',
  components: {
    FileUploader
  },
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: 'Openstack'
    },
    formType: {
      type: Number,
      default: 1 // 1-创建 2-编辑
    },
    updateInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skipGetCloudAccount: false,
      privateUseProvider: true,
      cloudProviderType: 'private',
      formatOptions: IMAGE_FORMAT,
      osOptions: IMAGE_OS,
      visibilityOptions: [
        {
          lable: '公有',
          value: '公有'
        },
        {
          lable: '私有',
          value: '私有'
        }
      ],
      projectOptions: [
        {
          lable: '是',
          value: '是'
        },
        {
          lable: '否',
          value: '否'
        }
      ],
      form: {
        name: '',
        cloudProvider: '',
        cloudAccountName: '',
        file: null,
        fileName: '',
        format: '',
        visibility: '',
        protect: ''
      },
      // 校验规则
      rules: {
        name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
        cloudProvider: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        fileName: [
          { required: true, message: '请选择镜像文件', trigger: 'blur' }
        ],
        format: [
          { required: true, message: '请选择镜像格式', trigger: 'change' }
        ],
        visibility: [
          { required: true, message: '请选择可见性', trigger: 'change' }
        ],
        protect: [
          { required: true, message: '请选择受保护性', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    formType: {
      handler(newVal) {
        if (newVal === 2) {
          this.skipGetCloudAccount = true
          this.form = JSON.parse(JSON.stringify(this.updateInfo))
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal && this.formType === 1) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-openstack {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    // &:nth-child(2n) {
    //   margin-left: 20px;
    // }
    &.right {
      margin-left: 20px;
    }
  }
  .other {
    border-bottom: 1px solid #f2f2f2;
    padding: 0 0 10px 0;
    margin-bottom: 20px;
  }
}
</style>
